<template>
  <view class="content">
    <concern-banner ref="concern"></concern-banner>
    <view class="tips-box"></view>
    <view class="info-box">
      <view class="info-block">
        <view class="tips-content">时间起卦</view>
        <view class="section">
          <view class="section-title plural-section">
            <view class="plural-title">阳历：</view>
          </view>
          <view>
            <view class="section-content" @click="chooseDate">
              <view class="input_text">{{ year }}年{{ month }}{{ day }}</view>
              <img class="arrow-icon" src="../../../static/images/bazi/arrow_down.png" />
            </view>
            <view class="section-content">
              <view class="section-title lunar-item">(阴历)</view>
              <view class="input_text lunar-item">{{ lunarDate }}</view>
            </view>
          </view>
        </view>
        <view class="section">
          <view class="section-title">时间：</view>
          <view @click="chooseTime" class="section-content">
            <view class="input_text"
              >{{ hour > 9 ? hour : "0" + hour }} :
              {{ minute > 9 ? minute : "0" + minute }}</view
            >
            <img class="arrow-icon" src="../../../static/images/bazi/arrow_down.png" />
          </view>
        </view>
        <view class="btn-box">
          <view @click="querySelectTime" class="quiryButton">
            <view class="btn-text">选时起卦</view>
          </view>
          <view @click="queryNewTime" class="quiryButton">
            <view class="btn-text">现时起卦</view>
          </view>
        </view>
      </view>
    </view>
    <activity-box :positionId="302"></activity-box>
    <yipu-logo></yipu-logo>
    <!-- 日期选择弹出框 -->
    <view :class="['picker-view', showDatePickerView ? 'show' : '']">
      <view class="picker-inner">
        <view class="pick_header">
          <view class="pick-item">阳历</view>
        </view>
        <view class="time">
          <picker-view
            @change="bindDateChange"
            indicatorStyle="height:80rpx;"
            style="height: 100%"
            :value="value"
          >
            <picker-view-column>
              <view v-for="(item, index) in lunarYears" :key="index">{{
                item + "年"
              }}</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item, index) in months" :key="index">{{ item }}</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item, index) in days" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="btns">
          <view @click="confirmSelectDate" class="confirm">确认</view>
        </view>
      </view>
    </view>
    <!-- 时间选择弹出框 -->
    <view :class="['picker-view', showTimePickerView ? 'show' : '']">
      <view class="picker-inner">
        <view class="pick_header">
          <view class="pick-item">时间</view>
        </view>
        <view class="time">
          <text class="hm-span">:</text>
          <picker-view
            @change="bindTimeChange"
            indicatorStyle="height:80rpx;"
            style="height: 100%"
            :value="timeValue"
          >
            <picker-view-column>
              <view v-for="(item, index) in hours" :key="index">{{
                item > 9 ? item : "0" + item
              }}</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item, index) in minutes" :key="index">{{
                item > 9 ? item : "0" + item
              }}</view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="btns">
          <view @click="confirmSelectTime" class="confirm">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var e = require("@/utils/interopRequireDefault")(require("@/utils/meihua/getDateFn.js"));
var calendarConverterFn = new (require("@/utils/meihua/calendarConverterFn.js").CalendarConverter)();
var siZhuInfoFn =
  (new (require("@/utils/meihua/listsFn.js").Lists)(),
  new (require("@/utils/meihua/siZhuInfo.js").SiZhuInfo)());
for (
  var a,
    n,
    l,
    r = [
      "01月",
      "02月",
      "03月",
      "04月",
      "05月",
      "06月",
      "07月",
      "08月",
      "09月",
      "10月",
      "11月",
      "12月",
    ],
    o = [
      "01日",
      "02日",
      "03日",
      "04日",
      "05日",
      "06日",
      "07日",
      "08日",
      "09日",
      "10日",
      "11日",
      "12日",
      "13日",
      "14日",
      "15日",
      "16日",
      "17日",
      "18日",
      "19日",
      "20日",
      "21日",
      "22日",
      "23日",
      "24日",
      "25日",
      "26日",
      "27日",
      "28日",
      "29日",
      "30日",
      "31日",
    ],
    h = new Date(),
    c = [],
    d = [],
    f = [],
    p = [],
    v = [],
    D = [],
    x = 0;
  x <= 198;
  x++
) {
  var S = 1901 + x;
  S == h.getFullYear() && (a = x), c.push(S), D.push(S);
}
for (var z = 0; z <= 11; z++) z == h.getMonth() && (n = z), d.push(r[z]);
for (var T = 0; T < q(c[a], n + 1); T++) T == h.getDate() - 1 && (l = T), f.push(o[T]);
for (var M = 0; M <= 23; M++) p.push(M);
for (var V = 0; V <= 59; V++) v.push(V);
function q(a, n) {
  return 2 == n
    ? (a % 4 == 0 && a % 100 != 0) || a % 400 == 0
      ? 29
      : 28
    : 4 == n || 6 == n || 9 == n || 11 == n
    ? 30
    : 31;
}

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      lunarYears: D,
      months: d,
      days: f,
      hours: p,
      minutes: v,
      // 出生日期时间
      value: [0, 0, 0],
      timeValue: [0, 0],
      year: 0,
      month: 0,
      day: 0,
      hour: 0,
      minute: 0,
      lunarDate: "",
      showDatePickerView: false,
      showTimePickerView: false,
    };
  },
  computed: {
    ...mapGetters({
      isConcern: "user/isConcern",
    }),
  },
  methods: {
    // 日期选择
    chooseDate: function () {
      this.showDatePickerView = true;
    },
    // 日期修改
    bindDateChange: function (a) {
      let n = a.detail.value;
      if (n[0] != this.value[0] || n[1] != this.value[1]) {
        f.length = 0;
        for (let l = 0; l < q(c[n[0]], n[1] + 1); l++) h.getDay(), f.push(o[l]);
      }
      this.days = f;
      this.value = n;
    },
    // 确定日期
    confirmSelectDate: function (a) {
      this.dataValueSetting();
      this.showDatePickerView = false;
    },
    // 日期
    dataValueSetting: function () {
      this.year = this.lunarYears[this.value[0]];
      this.month = this.months[this.value[1]];
      this.day = this.days[this.value[2]];
      // 显示农历日期
      this.toLunarDate();
    },
    toLunarDate: function () {
      var date =
        this.year + "-" + this.month.replace("月", "") + "-" + this.day.replace("日", "");
      var t = new Date(date);
      var i = (0, e.default)(t, "Y");
      var l = (0, e.default)(t, "M");
      var r = (0, e.default)(t, "D");
      var o = new Date(i, l - 1, r);
      var u = calendarConverterFn.solar2lunar(o);
      var s = u.cYear + "年" + u.lunarMonth + "月" + u.lunarDay + "日";
      this.lunarDate = s;
    },
    // 选择时间
    chooseTime: function () {
      this.showTimePickerView = true;
    },
    bindTimeChange: function (a) {
      let value = a.detail.value;
      this.timeValue = [value[0], value[1]];
    },
    // 确定时间
    confirmSelectTime: function () {
      this.timeValueSetting();
      this.showTimePickerView = false;
    },
    timeValueSetting: function () {
      this.hour = this.hours[this.timeValue[0]];
      this.minute = this.minutes[this.timeValue[1]];
    },
    // 现时起卦
    queryNewTime() {
      if (this.isConcern == true) {
        var t = (0, e.default)(new Date(), "Y");
        var i = (0, e.default)(new Date(), "M");
        var l = (0, e.default)(new Date(), "D");
        var r = Math.floor(((new Date().getHours() + 1) % 24) / 2) + 1;
        var o = "子丑寅卯辰巳午未申酉戌亥"[r - 1];
        var u = new Date(t, i - 1, l);
        var s = calendarConverterFn.solar2lunar(u);
        var c = siZhuInfoFn.getSiZhu(s.cDay, r) + o;
        var f = siZhuInfoFn.getKongWang(s.cDay);
        var d = (0, e.default)(new Date(), "Y年M月D日 h:m");
        var D = s.cYear + "年" + s.lunarMonth + "月" + s.lunarDay + "日" + o + "时";
        var g = s.cYear + " " + s.cMonth + " " + s.cDay + " " + c + " (" + f + "空)";
        var h = new Array(
          "子",
          "丑",
          "寅",
          "卯",
          "辰",
          "巳",
          "午",
          "未",
          "申",
          "酉",
          "戌",
          "亥"
        );
        var w = parseInt(this.contains(h, s.cYear[1])) + s.lMonth + s.lDay;
        var y = parseInt(this.contains(h, s.cYear[1])) + s.lMonth + s.lDay + r;
        var v = 1,
          M = 1,
          m = 1;
        if (w > 0 && w <= 8) v = w;
        else {
          var Y = w % 8;
          v = 0 === Y ? 8 : Y;
        }
        if (y > 0 && y <= 8) M = y;
        else {
          var p = y % 8;
          M = 0 === p ? 8 : p;
        }
        if (y > 0 && y <= 6) m = y;
        else {
          var b = y % 6;
          m = 0 === b ? 6 : b;
        }
        var S = {
            type: 1,
            sg: v,
            xg: M,
            dy: m,
            sc: 1,
            number1: 1,
            number2: 1,
            gonli: d,
            nongli: D,
            sizhu: g,
          },
          T = "/pages/meihua/details/details?info=" + JSON.stringify(S);
        uni.navigateTo({
          url: T,
        });
      } else {
        this.$refs.concern.concernPopup();
      }
    },
    // 选时起卦
    querySelectTime: function () {
      if (this.isConcern == true) {
        var date =
          this.year +
          "/" +
          this.month.replace("月", "") +
          "/" +
          this.day.replace("日", "");
        var time =
          (this.hour > 9 ? this.hour : "0" + this.hour) +
          ":" +
          (this.minute > 9 ? this.minute : "0" + this.minute);
        var t = date + " " + time;
        var i = new Date(t);
        var l = (0, e.default)(i, "Y");
        var r = (0, e.default)(i, "M");
        var o = (0, e.default)(i, "D");
        var u = Math.floor(((i.getHours() + 1) % 24) / 2) + 1;
        var s = "子丑寅卯辰巳午未申酉戌亥"[u - 1];
        var c = new Date(l, r - 1, o);
        var f = calendarConverterFn.solar2lunar(c);
        var d = siZhuInfoFn.getSiZhu(f.cDay, u) + s;
        var D = siZhuInfoFn.getKongWang(f.cDay);
        var g = (0, e.default)(i, "Y年M月D日 h:m");
        var h = f.cYear + "年" + f.lunarMonth + "月" + f.lunarDay + "日" + s + "时";
        var w = f.cYear + " " + f.cMonth + " " + f.cDay + " " + d + " (" + D + "空)";
        var y = new Array(
          "子",
          "丑",
          "寅",
          "卯",
          "辰",
          "巳",
          "午",
          "未",
          "申",
          "酉",
          "戌",
          "亥"
        );
        var v = parseInt(this.contains(y, f.cYear[1])) + f.lMonth + f.lDay;
        var M = parseInt(this.contains(y, f.cYear[1])) + f.lMonth + f.lDay + u;
        var m = 1,
          Y = 1,
          p = 1;
        if (v > 0 && v <= 8) m = v;
        else {
          var b = v % 8;
          m = 0 === b ? 8 : b;
        }
        if (M > 0 && M <= 8) Y = M;
        else {
          var S = M % 8;
          Y = 0 === S ? 8 : S;
        }
        if (M > 0 && M <= 6) p = M;
        else {
          var T = M % 6;
          p = 0 === T ? 6 : T;
        }
        var q = {
            type: 1,
            sg: m,
            xg: Y,
            dy: p,
            gonli: g,
            nongli: h,
            sizhu: w,
          },
          I = "/pages/meihua/details/details?info=" + JSON.stringify(q);
        uni.navigateTo({
          url: I,
        });
      } else {
        this.$refs.concern.concernPopup();
      }
    },
    contains: function (e, a) {
      for (var n = e.length; n--; ) if (e[n] === a) return n + 1;
      return !1;
    },
    onLoad() {
      this.year = c[a];
      this.month = d[n];
      this.day = f[l];
      this.hour = 0;
      this.minute = 0;
      this.value = [a, n, l];
      this.timeValue = [0, 0];
      this.toLunarDate();
    },
  },
};
</script>

<style scoped>
.content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  position: relative;
}
.tips-box {
  height: 400rpx;
  background-color: #c6a680;
  width: 100%;
}
.tips-content {
  width: 100%;
  height: 31rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  font-stretch: normal;
  line-height: 34rpx;
  letter-spacing: 0rpx;
  color: #32312e;
  margin: 94rpx auto 98rpx;
}
.info-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -230rpx;
}
.info-block {
  background-color: #fff;
  width: 640rpx;
  height: fit-content;
  border-radius: 0rpx;
  box-shadow: 0 0 20rpx #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 48rpx;
}

.section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.section-title {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 32rpx;
}
.section-content {
  width: 422rpx;
  height: 88rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx;
}
.lunar-item {
  font-size: 26rpx;
  color: #808080;
}
.plural-section {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 88rpx;
  justify-content: center;
}
.plural-title {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn-box {
  display: flex;
  flex-direction: column;
}
.quiryButton {
  width: 521rpx;
  height: 78rpx;
  
  font-size: 32rpx;
  color: #fff;
  background-color: #1e1e1eff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 36rpx;
}
.btn-text {
  font-size: 32rpx;
  white-space: nowrap;
}
/* 弹出框 */
.picker-view {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  max-width: 750px;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.picker-view.show {
  visibility: visible;
}
.picker-view .picker-inner {
  background-color: #fff;
  display: block;
  font-size: 30rpx;
  text-align: center;
  width: 100%;
}

.picker-view .picker-inner .time {
  display: block;
  height: 400rpx;
  padding: 20rpx;
  position: relative;
}

.picker-view .picker-inner .time.show {
  display: block;
}

.picker-view .picker-inner .time .hm-span {
  position: absolute;
  right: 50%;
  top: 197rpx;
}

.picker-view .picker-inner .type {
  border-top: 1rpx solid #eee;
  height: 80rpx;
}

.picker-view .picker-inner .btns {
  height: 80rpx;
  line-height: 80rpx;
  overflow: hidden;
  padding-bottom: 2vw;
}

.picker-view .picker-inner .btns .confirm {
  width: 409rpx;
  height: 71rpx;
  color: #fff;
  background-color: #c6a680;
  margin: 0 auto;
  border-radius: 12rpx;
  font-size: 43rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pick_header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2rpx solid #c6a680;
  height: 95rpx;
  width: 100%;
}

.pick-item {
  color: #c6a680;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  box-sizing: border-box;
  font-size: 36rpx;
  font-weight: bolder;
}
.pick-active {
  border-bottom: 14rpx solid #d9a47c;
}
.arrow-icon {
  height: 28rpx;
  width: 28rpx;
  padding-top: 4rpx;
  padding-left: 8rpx;
}
</style>
